import type { GreasyForkElements } from '../../../../../../../../../types/constants/personalization/greasy_fork'
import { ThemeVarService } from '../../../../../../../../../lib/abstract/style/theme_var/service'
import {
  BodyClasses,
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../../types/constants'

// 测试链接：https://greasyfork.org/zh-CN/scripts/534876/versions/new
export class ScriptVersionsNewPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private static instance: ScriptVersionsNewPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): ScriptVersionsNewPage {
    if (!ScriptVersionsNewPage.instance) {
      ScriptVersionsNewPage.instance = new ScriptVersionsNewPage()
    }
    return ScriptVersionsNewPage.instance
  }

  init(): void {
    $(`.width-constraint #script-content input[type="file"]#code-upload`).on('change', (e) => {
      const $element = $(e.currentTarget)
      const value = $element.val()
      $element.toggleClass('file-uploaded', !!value)
    })
  }

  getMainStyles(): string {
    return `
.width-constraint {
  #script-content {
    .new_script_version {
      textarea#script_version_code {
        background-color: var(--${PROJECT_PREFIX}-theme-code-bg) !important;
      }
      
      input[type="file"]#code-upload.${BodyClasses.FILE_UPLOADED} {
        color: var(${this.themeVarService.link.default.text}) !important;
      }
    }
  }
}    
`
  }
}
